<template>
  <view>
    <u-navbar title="占座记录" auto-back fixed placeholder></u-navbar>
    <view class="content">
      <z-paging ref="paging" fixed use-safe-area-placeholder refresher-vibrate refresher-only
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
			style="top: calc(44px + var(--status-bar-height));" @scroll="onScroll">
        <u-gap height="10px" bg-color="#f5f5f5"></u-gap>
        <view v-if="dataList.length != 0">
          <u-cell v-for="item in dataList" :key="item.id" :title="item.name + item.seat + '座'" 
          :value="item.expired ? '已结束': '使用中'">
            <view slot="label" style="color: #888;font-size: 12px;">
              <view>时间：{{ item.start + '~' + item.end }}</view>
            </view>
          </u-cell>
          <u-loadmore :status="loadMore" margin-top="20px" margin-bottom="20px"></u-loadmore>
        </view>
        <u-empty v-else icon="/static/no_data.png" text="无记录"></u-empty>
      </z-paging>
    </view>
  </view>
</template>

<script>
import mixin from '@/mixin'
import {
  studyLog
} from '@/api/study'
export default {
  data() {
    return {

    }
  },
  mixins: [mixin],
  created() {
    this.getDataList(true)
  },
  methods: {
    getDataList(isRefresh) {
      const params = {}
      params.size = 20
      params.current = this.current
      params.uid = this.$store.getters.id
      studyLog(params).then(res => {
        this.$refs.paging.complete()
        const { code, data } = res
        if(code === 200) {
          this.total = data.total
          if(isRefresh) {
            this.dataList = []
          }
          data.list.forEach(item => {
            item.expired = new Date(item.endTime).getTime < new Date().getTime()
            this.dataList.push(item)
          })
        }
      }).catch(() => {
        this.$refs.paging.complete()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>